<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<view class="home-header-container"  v-if="userType == 'manager'">
			<view class="content">
				<view class="revenue-card">
					<text class="title">今日营业额（元）</text>
					<text class="money">{{today.fee}}</text>
				</view>
				<view class="divider"></view>
				<view class="revenue-card">
					<text class="title">累计营业额（元）</text>
					<text class="money">{{total.fee}}</text>
				</view>
			</view>

			<view class="profit-section">
				<view class="profit-container">
					<uni-icons type="wallet" size="16" color="#FFB800"></uni-icons>
					<text class="profit-text">累计分成收益（元）：</text>
					<text class="profit-amount">0.00</text>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-container">
			<!-- 营业统计卡片 -->
			<view class="card stats-card" @click="navigateToSales" v-if="authType==2">
				<view class="card-header">
					<view class="title-container">
						<uni-icons type="chart" size="18" color="#FF6B01"></uni-icons>
						<text class="title">营业统计</text>
					</view>
					<view class="date-container" @click="showCalendar">
						<uni-icons type="calendar" size="14" color="#999"></uni-icons>
						<text class="date">{{currentDate}}</text>
					</view>
				</view>
				<view class="sales-stats">
					<view class="image-wrapper">
						<uni-icons type="eye-filled" size="40" color="#f5f579"></uni-icons>
					</view>
					<view class="stats-divider"></view>
					<view class="stats-items">
						<view class="stats-item">
							<text class="amount">¥{{today.fee}}</text>
							<text class="label">今日营业额</text>
						</view>
						<view class="stats-item">
							<text class="amount">¥{{week.fee}}</text>
							<text class="label">本周营业额</text>
						</view>
						<view class="stats-item">
							<text class="amount">¥{{month.fee}}</text>
							<text class="label">当月营业额</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 设备统计卡片 -->
			<view class="card device-card">
				<view class="card-header">
					<view class="title-container">
						<uni-icons type="car" size="18" color="#FF6B01"></uni-icons>
						<text class="title">盒车设备</text>
					</view>
					<view class="view-more" @click="handleToolClick('调度管理')">
						<text>查看详情</text>
						<uni-icons type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
				<view class="device-stats">
					<view class="device-item">
						<text class="count">{{device.total}}</text>
						<text class="label">设备总数</text>
					</view>
					<view class="device-item">
						<text class="count">{{device.available}}</text>
						<text class="label">可用总数</text>
					</view>
					<view class="device-item">
						<text class="count">{{device.unavailable}}</text>
						<text class="label">非可用总数</text>
					</view>
				</view>
			</view>

			<!-- 工具台卡片 -->
			<view class="card tools-card">
				<view class="card-header">
					<view class="title-container">
						<uni-icons type="gear" size="18" color="#FF6B01"></uni-icons>
						<text class="title">工具台</text>
					</view>
				</view>
				<view class="tools-grid" v-if="userType == 'manager'">
					<view class="tool-item" v-for="(tool, index) in tools" :key="index"
						@click="handleToolClick(tool.name)">
						<view class="tool-icon">
							<uni-icons :type="tool.icon" size="24" color="#FF6B01"></uni-icons>
						</view>
						<text class="label">{{tool.name}}</text>
					</view>
				</view>

				<view class="tools-grid" v-if="userType == 'account'">
					<view class="tool-item" @click="handleToolClick('经营分析')" v-if="authType==2">
						<view class="tool-icon">
							<uni-icons type="info" size="24" color="#FF6B01"></uni-icons>
						</view>
						<text class="label">经营分析</text>
					</view>
					<view class="tool-item" @click="handleToolClick('调度管理')" v-if="authType==1">
						<view class="tool-icon">
							<uni-icons type="paperplane" size="24" color="#FF6B01"></uni-icons>
						</view>
						<text class="label">调度管理</text>
					</view>
				</view>
			</view>
		</view>

		<view class="tab-placeholder">
			
			
		</view>
		<uni-calendar 
			ref="calendar"
			:insert="false"
			@confirm="confirmDate"
			 />
	</view>
</template>

<script>
	import {
		getTodayTurnover
	} from '@/api/order.js'
	import {
		getCurrentUser
	} from '@/api/user.js'
	import {
		getUserLayout
	}from '@/api/layout.js'
	export default {
		data() {
			return {
				// 营业统计数据
				currentDate: this.formatDate(new Date()),
				today: {},
				week: {},
				month: {},
				year: {},
				total: {},

				// 设备统计数据
				device:{
					total:0,
					available:0,
					unavailable:0
				},
				userType: "",
				authType: 0, //1调度 2会计
				// 工具台数据
				tools: [{
						name: '子账号管理',
						icon: 'personadd'
					},
					{
						name: '我的账单',
						icon: 'wallet'
					},
					{
						name: '调度管理',
						icon: 'paperplane'
					},
					{
						name: '人工结算',
						icon: 'staff'
					},
					{
						name: '订单查询',
						icon: 'search'
					},
					{
						name: '经营分析',
						icon: 'info'
					}
				]
			}
		},
		onLoad() {
			this.getTodayTurnover();
			this.getInfo()
			this.getLayout()
		},
		onPullDownRefresh() {
			this.getTodayTurnover();
		},
		methods: {

			// 获取当前管理者营业额详情
			async getTodayTurnover() {
				const res = await getTodayTurnover(this.currentDate);
				this.today = res.data.today;
				this.week = res.data.week;
				this.month = res.data.month;
				this.year = res.data.year;
				this.total = res.data.total
				uni.stopPullDownRefresh()
			},

			// 获取用户信息
			async getInfo() {
				let res = await getCurrentUser();
				const subaccountId = res.data?.subaccount_id ?? null;
				this.userType = subaccountId ? 'account' : 'manager';
				this.authType = res.data.auth_type || 0
			},
			
			async getLayout(){
				let res = await getUserLayout();
				// console.log(res.data);
				this.device = res.data
			},

			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			navigateToSales() {
				return false
				uni.navigateTo({
					url: "/pages/sales/index"
				});
			},
			viewDeviceDetails() {
				uni.navigateTo({
					url: "/pages/device/details"
				});
			},
			handleToolClick(type) {
				const routeMap = {
					'子账号管理': '/home-workbench/subAccounts/subAccounts',
					'我的账单': '/home-workbench/myOrder/myOrder',
					'调度管理': '/home-workbench/dispatch/dispatch',
					'人工结算': '/home-workbench/settlement/settlement',
					'巡检通知': '/home-package/inspection/inspection',
					'场地日营收': '/home-package/income/income',
					'订单查询': '/home-workbench/queryOrder/queryOrder',
					'经营分析': '/home-workbench/analysis/analysis'
				};

				if (routeMap[type]) {
					console.log(routeMap[type]);
					uni.navigateTo({
						url: routeMap[type]
					});
				} else {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					});
				}
			},
			showCalendar(){
				this.$refs.calendar.open()
			},
			confirmDate(e){
				console.log(e)
				this.currentDate = e.year+"-"+e.month+"-"+e.date
				this.getTodayTurnover()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	/* 头部样式 */
	.home-header-container {
		background: linear-gradient(135deg, #FFD000 0%, #FFBC00 100%);
		padding: 20px 15px;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.revenue-card {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 10px;

				.title {
					font-size: 13px;
					color: rgba(0, 0, 0, 0.65);
					margin-bottom: 6px;
					font-weight: 500;
				}

				.coupon-tag {
					display: flex;
					align-items: center;
					background-color: rgba(255, 90, 31, 0.8);
					border-radius: 12px;
					padding: 2px 8px;
					margin: 5px 0;

					text {
						font-size: 10px;
						color: #fff;
						margin-left: 4px;
					}
				}

				.money {
					font-size: 24px;
					color: #333;
					font-weight: bold;
					margin-top: 5px;
				}
			}

			.divider {
				width: 1px;
				height: 40px;
				background-color: rgba(0, 0, 0, 0.1);
			}
		}

		.profit-section {
			margin-top: 5px;

			.profit-container {
				background-color: #fff;
				border-radius: 24px;
				padding: 10px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

				.profit-text {
					font-size: 13px;
					color: #666;
					margin-left: 6px;
				}

				.profit-amount {
					font-size: 14px;
					color: #FF6B01;
					font-weight: bold;
				}
			}
		}
	}

	/* 内容区域样式 */
	.content-container {
		padding: 15px;
	}

	.card {
		background-color: #fff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.title-container {
				display: flex;
				align-items: center;

				.title {
					font-size: 16px;
					font-weight: bold;
					color: #333;
					margin-left: 6px;
				}
			}

			.date-container {
				display: flex;
				align-items: center;

				.date {
					font-size: 13px;
					color: #999;
					margin-left: 4px;
				}
			}

			.view-more {
				display: flex;
				align-items: center;

				text {
					font-size: 12px;
					color: #999;
					margin-right: 2px;
				}
			}
		}
	}

	.sales-stats {
		display: flex;
		padding: 5px 0;
		align-items: center;

		.image-wrapper {
			width: 60px;
			height: 60px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 107, 1, 0.1);
		}

		.stats-divider {
			width: 1px;
			height: 50px;
			background-color: #EFEFEF;
			margin: 0 12px;
		}

		.stats-items {
			flex: 1;
			display: flex;
			justify-content: space-between;
		}

		.stats-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.amount {
				font-size: 18px;
				font-weight: bold;
				color: #FF6B01;
				margin-bottom: 6px;
			}

			.label {
				font-size: 12px;
				color: #999;
			}
		}
	}

	.device-stats {
		display: flex;
		justify-content: space-between;
		background-color: #FAFAFA;
		border-radius: 8px;
		padding: 15px 10px;

		.device-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 24px;
				background-color: #EFEFEF;
			}

			.count {
				font-size: 20px;
				font-weight: bold;
				color: #FF6B01;
				margin-bottom: 6px;
			}

			.label {
				font-size: 12px;
				color: #999;
				white-space: nowrap;
			}
		}
	}

	.tools-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px 10px;
		padding: 5px 0;

		.tool-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.tool-icon {
				width: 48px;
				height: 48px;
				border-radius: 24px;
				background-color: #FFF5E5;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 8px;
			}

			.label {
				font-size: 12px;
				color: #666;
				white-space: nowrap;
			}
		}
	}

	.tab-placeholder {
		height: 50px;
		/* 保留底部导航区域 */
	}
</style>